<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    title: "",
    unit: "",
  },
  data() {
    return {
      isDownLoad: 0,
      option: [],
      labelName: "",
      labelName1: "",
      echartsList: [],
      xlist: [],
      ylist: [],
      echartsList1: [],
      xlist1: [],
      ylist1: [],
      dataColumn: [],
      dataColumn1: [],
      openColumn: [],
      openColumn1: [],
      echartsData: [],
      worldMapContainer: {},
    };
  },
  mounted() {
    this.worldMapContainer = document.getElementById("main");
    //设置容器高宽
    this.isDownLoad = this.$route.query.download;
    this.resizeWorldMapContainer();
  },
  methods: {
    getData(data) {
      this.echartsData = data;
      this.dataColumn = this.echartsData[0].dataColumn;
      this.openColumn = this.echartsData[0].openColumn;
      this.echartsList = this.echartsData[0].dataList;
      this.xlist = this.echartsList.map((item) => item.create_time);
      this.ylist = this.echartsList.map((item) => item[this.dataColumn]);
      this.labelName = this.echartsList[0][this.openColumn];
      this.$nextTick(() => {
        this.getEcgarts();
      });
    },
    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    resizeWorldMapContainer() {
      if (this.isDownLoad == 1) {
        this.worldMapContainer.style.width = "3840px";
        this.worldMapContainer.style.height = "2164px";
      } else {
        this.worldMapContainer.style.width = window.innerWidth - 270 + "px";
        this.worldMapContainer.style.height = window.innerHeight - 40 + "px";
      }
    },
    downloadFile(url, fileName) {
      var link = document.createElement("a");
      //设置下载的文件名
      document.body.appendChild(link);
      link.style.display = "none";
      link.href = url;
      link.download = fileName;
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL();
      // window.open(url);
    },

    getEcgarts() {
      var myChart = echarts.init(this.worldMapContainer);
      this.option = {
        tooltip: {
          trigger: "axis",
        },
        title: {
          text: this.title,
          x: "center",
          y: "top",
          textAlign: "left",
          textStyle: {
            fontSize: "22",
          },
        },
        xAxis: {
          data: this.xlist,
          axisLabel: {
            fontSize: "",
          },
        },
        // x轴拖动
        dataZoom: [
          {
            type: "slider",
            realtime: true, //拖动滚动条时是否动态的更新图表数据
            height: 30, //滚动条高度
            start: 0, //滚动条开始位置（共100等份）
            end: 100, //结束位置（共100等份）
          },
        ],
        grid: {
          show: true,
          top: "40px",
          left: "10px",
          right: "10px",
          bottom: "40px",
          containLabel: true,
          borderWidth: 1,
          borderColor: "#D1D1D1",
          backgroundColor: "#fff",
        },
        yAxis: [
          {
            scale: true,
            type: "value",
            position: "left",
            axisLabel: {
              fontSize: "",
            },
            splitLine: {
              show: true, //不显示横向网格线
            },
            name: "单位（）",
          },
        ],
        animation: false,
        series: [
          {
            // name: this.labelName,
            data: this.ylist,
            type: "bar",
            itemStyle: {
              normal: {
                color: "#1568ac",
                lineStyle: {
                  color: "#1568ac",
                },
              },
            },
          },
        ],
      };
      this.option.yAxis[0].name = "单位：" + this.unit;

      if (this.isDownLoad == 1) {
        this.option.yAxis[0].nameTextStyle = {
          fontSize: 66, //  字体大小
          lineHeight: 100,
          padding: [-120, 15, 4, 0], //  内填充
        };
        this.option.xAxis.axisLabel = { fontSize: "72", lineHeight: 150 };
        this.option.yAxis[0].axisLabel = { fontSize: "72" };
        this.option.title.textStyle.fontSize = 90;
        this.option.title.textStyle.lineHeight = 90;
        this.option.grid.top = 200;
        this.option.grid.right = 270;
        this.option.dataZoom = [];
      }

      myChart.setOption(this.option);
      if (this.isDownLoad == 1) {
        const chartImgUrl = myChart.getDataURL({
          pixelRatio: 1,
          backgroundColor: "",
          type: "png",
        });
        setTimeout(() => {
          this.downloadFile(chartImgUrl, this.title);
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss">
</style>
